<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检测项目设置</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="检测项目设置">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="../../script/js/layui/css/layui.css" media="all">
<script type="text/javascript" src="../../script/js/layui/layui.js"></script>
<script type="text/javascript" src="../../script/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../mes/js/vue.min.js"></script>
<script type="text/javascript" src="../../mes/js/vue-resource.min.js"></script>
<script type="text/javascript" src="../../script/js/lodash.min.js"></script>
<style type="text/css">
.layui-row{ margin-bottom: 10px;}
.input-lab{ width: 100px; color: black;}
.input-cls{ width: 150px;}
.exceRuleDiv{display: none; height: 100%;}
#exceRuleDiv .layui-table-view{margin: 0;}
</style>
</head>
<body id="checkItemConfig">
<form class="layui-form layui-form-pane">
<div class="layui-container">
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">编号</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="code" v-model="formData.code" :idsabled="true">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">检测项目</label> 
				<div class="layui-input-inline input-cls">
<!-- 					<input type="text" class="layui-input input-cls" v-model="formData.checkItem"> -->
					<select id="graphType" v-model="formData.checkItem" lay-filter="checkItem">
						<option v-for="sel in checkItemSel" value="{{sel.EMESQ_SPC_CHECKITEM_PRO_ID}}">{{sel.NAME}}</option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline layui-hide">
				<label class="layui-form-label input-lab">项目类型</label> 
				<div class="layui-input-inline">
					<input type="radio" lay-filter="checkitemType" name="checkitemType" value="variables" :disabled="configId != ''" checked="checked" title="计量型" v-model="formData.checkitemType">
					<input type="radio" lay-filter="checkitemType" name="checkitemType" value="counting" :disabled="configId != ''" title="计数型" v-model="formData.checkitemType">
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">控制图类型</label> 
				<div class="layui-input-inline input-cls">
					<select name="graphType" v-model="formData.graphType" :disabled="configId != ''" lay-filter="graphType">
						<option value="XR" selected="selected">XR</option>
						<option value="XS">XS</option>
						<option value="MR">MR</option>
						<option value="IMR">IMR</option>
						<option value="P">P</option>
						<option value="nP">nP</option>
						<option value="U">U</option>
						<option value="C">C</option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">样本容量</label> 
				<div class="layui-input-inline input-cls" id="sampleVolumeSel" v-show="showSampleVolume">
					<select name="sampleVolume" v-model="formData.sampleVolume" lay-filter="sampleVolume">
						<option v-for="sel in sampleVolumeSel" value="{{sel.val}}" :selected="sel.selected">{{sel.name}}</option>
					</select>
				</div>
				<div class="layui-input-inline input-cls" id="sampleVolumeInp" v-show="!showSampleVolume">
					<input type="text" class="layui-input" id="sampleVolume" v-model="formData.sampleVolume" maxlength="10">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">小数位数</label> 
				<div class="layui-input-inline input-cls">
					<select name="precision" v-model="formData.precision" lay-filter="precision">
						<option v-for="sel in precisionSel" value="{{sel.val}}" :selected="sel.selected">{{sel.name}}</option>
					</select>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">规格上限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="specificaUpper" v-model="formData.specificaUpper">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">目标值</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="targetVal" v-model="formData.targetVal">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">规格下限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="specificaLower" v-model="formData.specificaLower">
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">控制上限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="controlXUpper" v-model="formData.controlXUpper">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">目标值</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="controlX" v-model="formData.controlX">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">控制下限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="controlXLower" v-model="formData.controlXLower">
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">值上限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="valUpper" v-model="formData.valUpper">
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">值下限</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" id="valLower" v-model="formData.valLower">
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md4">
			<div class="layui-inline">
				<label class="layui-form-label input-lab">判异规则</label> 
				<div class="layui-input-inline">
					<input type="text" class="layui-input input-cls" v-model="exceRuleCur" @click="openExceRuleWin" readonly="readonly">
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item" style="text-align: center;">
		<button type="button"  class="layui-btn" @click="saveButton">保存</button>
		<button type="button"  class="layui-btn" @click="closeButton">关闭</button>
		<button type="button"  class="layui-btn layui-btn-warm" v-if="configId!=''" @click="calControl">计算控制限</button>
	</div>
</div>
</form>
<div id="exceRuleDiv" class="exceRuleDiv">
	<table class="layui-hide" id="exceRuleTable" lay-filter="exceRuleFilter"></table>
</div>
</body>
<script type="text/javascript">
var request = function (paras) {
	if (this.url_paraObj == undefined) {
		var search = window.location.search;
		if (search) {
			search = search.substring(1);
		}
		var paraString = search.split("&");
		this.url_paraObj = {}
		for (var i = 0; i < paraString.length; i++) {
			var index = paraString[i].indexOf("=");
			try {
				this.url_paraObj[paraString[i].substring(0, index)] = decodeURI(paraString[i].substring(index + 1));
			} catch (e) {
				this.url_paraObj[paraString[i].substring(0, index)] = paraString[i].substring(index + 1);
			}
		}
	 }
	 return paras ? this.url_paraObj[paras] : this.url_paraObj;
};
var vm = new Vue({
	el: "#checkItemConfig",
	data: {
		configId: request("configId") === "undefined" ? "" : request("configId"),
		formData: {
			code: "",
			checkItem: "",
			checkitemType: "",
			graphType: "XR",
			sampleVolume: "5",
			precision: "2",
			specificaUpper: "",
			targetVal: "",
			specificaLower: "",
			controlXUpper: "",
			controlX: "",
			controlXLower: "",
			valLower:"",
			valUpper:""
		},
		sampleVolumeSelected: "5",
		exceRuleCur: "",
		exceRuleWin: "",
		exceRuleData: [],
		checkItemSel: [],
		sampleVolumeSel: [{val: 1, name: "1"}, {val: 2, name: "2"}, {val: 3, name: "3"}, {val: 4, name: "4"}, {val: 5, name: "5", selected: true},
			{val: 6, name: "6"}, {val: 7, name: "7"}, {val: 8, name: "8"}, {val: 9, name: "9"}, {val: 10, name: "10"}, 
			{val: 11, name: "11"}, {val: 12, name: "12"}, {val: 13, name: "13"}, {val: 14, name: "14"}, {val: 15, name: "15"},
			{val: 16, name: "16"}, {val: 17, name: "17"}, {val: 18, name: "18"}, {val: 19, name: "19"}, {val: 20, name: "20"},
			{val: 21, name: "21"}, {val: 22, name: "22"}, {val: 23, name: "23"}, {val: 24, name: "24"}, {val: 25, name: "25"}
		],
		precisionSel: [{val: 0, name: "0"}, {val: 1, name: "1"}, {val: 2, name: "2"}, {val: 3, name: "3"}, 
			{val: 4, name: "4"}, {val: 5, name: "5"}, {val: 6, name: "6"}]
	},
	init: function() {
		var _self = this;
		var configId = request("configId") === "undefined" ? "" : request("configId");
		this.$nextTick(function() {
			layui.use(['form'], function(){
				var form = layui.form;
				_self.$http.post("../../spc/ckConfig/getBaseInfo",{
					configId: configId
				},{emulateJSON: true})
				.then(function(res){
					if(res.ok){
						var ckConfig = res.body.ckConfig;
						var checkItemList = res.body.checkItemList;
						if(checkItemList && checkItemList.length > 0){
							_self.checkItemSel = checkItemList;
						}
						if(ckConfig){
							_self.formData.code = ckConfig.CODE;
							_self.formData.checkItem = ckConfig.EMESQ_SPC_CHECKITEM_PRO_ID;
							_self.formData.checkitemType = ckConfig.CHECKITEM_TYPE;
							_self.formData.graphType = ckConfig.GRAPH_TYPE;
							_self.formData.sampleVolume = ckConfig.SAMPLE_VOLUME;
							_self.formData.precision = ckConfig.PRECISION;
							_self.formData.specificaUpper = ckConfig.SPECIFICA_UPPER;
							_self.formData.targetVal = ckConfig.TARGET_VAL;
							_self.formData.specificaLower = ckConfig.SPECIFICA_LOWER;
							_self.formData.controlXUpper = ckConfig.CONTROL_X_UPPER;
							_self.formData.controlX = ckConfig.CONTROL_X_VAL;
							_self.formData.controlXLower = ckConfig.CONTROL_X_LOWER;
							_self.formData.valUpper = ckConfig.VAL_UPPER;
							_self.formData.valLower = ckConfig.VAL_LOWER;
							_self.exceRuleCur = ckConfig.ER_CUR;
							
							var graphType = _self.formData.graphType;
							if(graphType === "nP" || graphType === "C" || graphType === "P" || graphType === "U"){
								$("#specificaUpper").attr("disabled", true);
								$("#targetVal").attr("disabled", true);
								$("#specificaLower").attr("disabled", true);
							}
						} else {
// 							_self.exceRuleCur = "R0";
						}
					}
					//渲染select
					setTimeout(function(){
						form.render('select');
						form.render('radio');
					}, 200); //刷新select选择框渲染
				});
				form.on('radio(checkitemType)', function(data){
					_self.formData.checkitemType = data.value;
				});
				form.on('select(checkItem)', function(data){
					_self.formData.checkItem = data.value; 
				});
				form.on('select(graphType)', function(data){
					_self.formData.graphType = data.value;
					var graphType = data.value;
					if(graphType === "nP" || graphType === "C" || graphType === "P" || graphType === "U"){	//nP、C图  样本容量手动填写
						_self.formData.sampleVolume = 120;
						_self.formData.checkitemType = "counting";	//计数型
					
						$("#sampleVolumeSel").hide();
						$("#sampleVolumeInp").show();
						if(graphType === "P" || graphType === "U"){
							_self.formData.sampleVolume = "";
							$("#sampleVolumeInp input").attr("disabled", true);
						} else {
							$("#sampleVolumeInp input").removeAttr("disabled");
						}
						
						$("#specificaUpper").attr("disabled", true);
						$("#targetVal").attr("disabled", true);
						$("#specificaLower").attr("disabled", true);
					} else {
						$("#sampleVolumeSel").show();
						$("#sampleVolumeInp").hide();
						
						$("#specificaUpper").removeAttr("disabled");
						$("#targetVal").removeAttr("disabled");
						$("#specificaLower").removeAttr("disabled");
						if(graphType === "IMR"){
							_self.formData.sampleVolume = 1;
							$("#sampleVolumeSel").hide();
							$("#sampleVolumeInp").show();
						}else{
							_self.formData.sampleVolume = _self.sampleVolumeSelected;s
						}
						_self.formData.checkitemType = "variables";	//计量型
					}
				});
				form.on('select(sampleVolume)', function(data){
					_self.formData.sampleVolume = data.value;
					_self.sampleVolumeSelected = data.value;
				});
				form.on('select(precision)', function(data){
					_self.formData.precision = data.value; 
				});
			});
		});
	},
	methods: {
		saveButton: function(){
			var _self = this;
			var formData = _self.formData;
			if(!formData.code){
				layer.msg("编码不能为空。", {time: 2000});
				$("#code").focus();
				return ;
			}
			if(!formData.checkItem){
				layer.msg("请选择检测项目。", {time: 2000});
// 				$("#code").focus();
				return ;
			}
			if(!formData.checkitemType){
				layer.msg("请选择项目类型。", {time: 2000});
// 				$("#code").focus();
				return ;
			}
			var sampleVolume = formData.sampleVolume * 1;
			if(formData.graphType !== "P" && formData.graphType !== "U"){
				if(!_.isInteger(sampleVolume) || sampleVolume < 1){
					layer.msg("请输入大于0的整数！", {time: 2000});
		    		$("#sampleVolume").focus();
		    		return;
				}
			}
			var specificaUpper = formData.specificaUpper * 1;
			if(_.isNaN(specificaUpper) || !_.isNumber(specificaUpper)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#specificaUpper").focus();
	    		return;
	    	}
			var targetVal = formData.targetVal * 1;
			if(_.isNaN(targetVal) || !_.isNumber(targetVal)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#targetVal").focus();
	    		return;
	    	}
			var specificaLower = formData.specificaLower * 1;
			if(_.isNaN(specificaLower) || !_.isNumber(specificaLower)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#specificaLower").focus();
	    		return;
	    	}
	    	var controlXUpper = formData.controlXUpper * 1;
			if(_.isNaN(controlXUpper) || !_.isNumber(controlXUpper)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#controlXUpper").focus();
	    		return;
	    	}
			var controlX = formData.controlX * 1;
			if(_.isNaN(controlX) || !_.isNumber(controlX)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#controlX").focus();
	    		return;
	    	}
			var controlXLower = formData.controlXLower * 1;
			if(_.isNaN(controlXLower) || !_.isNumber(controlXLower)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#controlXLower").focus();
	    		return;
	    	}
	    	
	    	var valUpper = formData.valUpper * 1;
			if(_.isNaN(valUpper) || !_.isNumber(valUpper)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#valUpper").focus();
	    		return;
	    	}
			var valLower = formData.valLower * 1;
			if(_.isNaN(valLower) || !_.isNumber(valLower)){
	    		layer.msg("请输入正确的数字！", {time: 2000});
	    		$("#valLower").focus();
	    		return;
	    	}
			_self.$nextTick(function(){
				var configId = _self.configId;
				_self.$http.post("../../spc/ckConfig/save", 
						$.extend({}, {configId: configId}, formData, {exceRuleData: JSON.stringify(_self.exceRuleData)}),
				{emulateJSON: true}).then(function(res){
					layer.msg(res.body.msg, {time: 2000});
					if(res.ok){
						parent.vm.closeConfigWin(true);	//true:  刷新列表
					}
				});
			});
		},
		openExceRuleWin: function(){
			var _self = this;
			layui.use(["layer"], function(){
				var layer = layui.layer;
				_self.exceRuleWin = layer.open({
					type : 1,
					title : '判异规则',
					id : 'exceRule',
					shadeClose : true,
					shade : 0.8,
					area : [ '900px', '500px' ],
					content: $("#exceRuleDiv"),
					btn: ['确认', '取消'],
					btnAlign: 'c',
					yes: _.debounce(function(index, layero) {
						var er = [];
						$.each(_self.exceRuleData, function(i, v) {
							if(v.IS_VALID === "Y"){
								er.push(v.CODE);
							}
						});
						_self.exceRuleCur = er.join(",");
						if(_self.configId && _self.configId != "" && _self.configId != "undefined"){	//configId有值， 修改页面
							_self.$nextTick(function() {
								_self.$http.post("../../spc/ckConfig/saveExceRuleData",{
									configId : _self.configId,
									exceRuleData : JSON.stringify(_self.exceRuleData)
								},{emulateJSON: true}).then(function(res){
									layer.msg(res.body.msg);
									if(res.body.result){
										layer.close(_self.exceRuleWin);
									}
								});
							});
						} else {
							layer.close(_self.exceRuleWin);
						}
					}, 200),	//延迟一点，保证编辑功能回调调用完毕
				  	success: function(layero, index){
				  		//成功打开弹出层后回调
				  		_self.getErData();
				  	}
				});
			});
		},
		renderErTable: function(_self, data) {
			layui.use(['table'], function(){
				var table = layui.table;
				table.render({
					id: 'erTable',
					elem: '#exceRuleTable'
// 				    ,height: 'full - 20'
				    ,cols: [[ //标题栏
				    	{type: 'checkbox', field: 'isValid', title: '', align:'center'}
				      ,{field: 'CODE', title: '编号',align:'center',width: 60}
				      ,{field: 'CONTENT', title: '现行规则',align:'center'}
				      ,{field: 'VAR_N', title: 'n',align:'center', edit: 'text',width: 50}
				      ,{field: 'VAR_M', title: 'm',align:'center', edit: 'text',width: 50}
				      ,{field: 'VAR_K', title: 'k',align:'center', edit: 'text',width: 50}
				      ,{field: 'BASIS', title: '规则依据',align:'center'}
				    ]]
					,limit: 100
					,limits: [10, 20, 50, 100]
				    ,data: data
				    ,page: false //是否显示分页
				    ,done: function(res, curr, count){
				    	//res:当前页数据或者异步请求返回的数据， curr：当前页码，count：数据总量
				    	_self.exceRuleData = $.extend(true, [], res.data);
						$.each(res.data, function(i, v) {
							if(v.IS_VALID === "Y"){	//默认复选框选中
								var sel = "#exceRuleDiv tr[data-index=" + v.LAY_TABLE_INDEX 
									+ "] td[data-field=isValid]";
								$(sel + " div.layui-unselect").addClass("layui-form-checked");
								$(sel + " input").prop("checked", true);
							}
						});
				    }
				});
				//监听表格事件
				table.on('checkbox(exceRuleFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var checked = obj.checked;	//当前是否选中状态
					var row = obj.data;	//获得当前行数据
					var type = obj.type;	//如果触发的是全选，则为：all，如果触发的是单选，则为：one
					if(type === "all"){
						$.each(_self.exceRuleData, function(i, v) {
							v.IS_VALID = obj.checked ? "Y" : "N";
						});
					} else {
						row.IS_VALID = obj.checked ? "Y" : "N";
						_self.exceRuleData[row.LAY_TABLE_INDEX] = row;
					}
				});
				//单元格编辑事件
				table.on('edit(exceRuleFilter)', function(obj) {
					var value = obj.value * 1;	//得到修改后的值
					var field = obj.field;	//当前编辑的字段名
					var row = obj.data;	//所在行的所有相关数据
					if(_.isInteger(value) && value > 0){
						var content = row.BASIS;
						var mat = content.match(/\[[a-zA-Z]\]/g);
						$.each(mat || [], function(i, v) {
							var curField = "VAR_" + v.substring(1, 2).toUpperCase();
							var newVal = field === curField ? value : row[curField];
							content = _.replace(content, v, newVal);
						});
						if(row.BASIS.indexOf(field.substring(4).toLowerCase()) == -1){
							row[field] = null;
						} else {
							row[field] = value;
						}
						row.CONTENT = content;
					} else {
						row[field] = _self.exceRuleData[row.LAY_TABLE_INDEX][field];	//值无意义，还原为old值
					}
					_self.exceRuleData[row.LAY_TABLE_INDEX] = row;
					table.reload("erTable");
				});
			});
		},
		getErData: function() {
			var _self = this;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/getErData",{
					configId : _self.configId,
					graphType : _self.formData.graphType
				},{emulateJSON: true}).then(function(res){
// 					_self.exceRuleData = res.body.erData;
					_self.$options.methods.renderErTable(_self, res.body.erData);
				});
			});
		},
		closeButton: function() {
			parent.vm.closeConfigWin();
		},
		calControl:function(){
			var _self = this;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/calControl",{
					configId : _self.configId,
					graphType : _self.formData.graphType
				},{emulateJSON: true}).then(function(res){
					if(res.body.result){
						_self.formData.controlXUpper = res.body.calData.UCL;
						_self.formData.controlX = res.body.calData.CL;
						_self.formData.controlXLower =  res.body.calData.LCL;
					}else{
						layer.msg(res.body.msg, {time: 2000});
					}						
				});
			});
		}
	},
	computed: {
		exceRuleStr: function() {
			return this.formData.exceRule.join(",");
		},
		showSampleVolume: function() {
			var graphType = this.formData.graphType;
			if(graphType === "nP" || graphType === "C" || graphType === "P" || graphType === "U"){
				return false;
			} else {
				return true;
			}
		}
	}
});
</script>
</html>